window.onload = function () {
    //1.获取标签
    var slider = document.getElementById('slider');
    var slider_main = document.getElementById('slider_main');
    var allboxs = slider_main.children;
    var next = document.getElementById('next');
    var prev = document.getElementById('prev');
    var slider_index = document.getElementById('slider_index');
    var isNow = 0,time=null;//可视索引
    //动态创建索引器
    for (var i = 0; i < allboxs.length; i++) {
        var span = document.createElement('span');
        if (i === 0) {
            span.className = 'slider_index_icon current'
        } else {
            span.className = 'slider_index_icon';
        }
        span.innerHTML = i + 1;
        slider_index.appendChild(span);
    }
    //3.让滚动的元素归位
    var scroll_w = parseInt(getstyle(slider, 'width'));
    console.log(scroll_w);
    for (var j = 1; j < allboxs.length; j++) {
        allboxs[j].style.left = scroll_w + "px";
    }
    //4.按钮下一张
    next.onclick = function () {
        //1.让当前可视元素动画左移2.让下一张图片快速显示到右边3.让这个元素动画进入
        widthAnimtion(allboxs[isNow], -scroll_w, 'left');
        isNow++;
        if (isNow >= allboxs.length) {
            isNow = 0;
        }
        allboxs[isNow].style.left = scroll_w + "px";
        widthAnimtion(allboxs[isNow], 0, 'left');
        setindex();
    }
    //5.上一张监听
    prev.onclick = function () {
        widthAnimtion(allboxs[isNow], scroll_w, 'left');
        isNow--;
        if (isNow < 0) {
            isNow = allboxs.length-1;
        }
        console.log(isNow);
        allboxs[isNow].style.left = -scroll_w + "px";
        widthAnimtion(allboxs[isNow], 0, 'left');
        setindex();
    }
    //6.遍历索引器，添加键盘监听事件
    for (var i = 0; i <slider_index.children.length; i++) {
        slider_index.children[i].onclick=function () {
            //6.1获取当前索引
            var index=parseInt(this.innerText)-1;
            console.log(index);
            if(index>isNow){
                widthAnimtion(allboxs[isNow], -scroll_w, 'left');
                allboxs[index].style.left = scroll_w + "px";
            }else {
                widthAnimtion(allboxs[isNow], scroll_w, 'left');
                allboxs[index].style.left = -scroll_w + "px";
            }
            isNow=index;
            widthAnimtion(allboxs[isNow], 0, 'left');
            setindex();
        }
    }
    //7开启定时器
    time=setInterval(nextAnimtion,5000);
    function nextAnimtion() {
        widthAnimtion(allboxs[isNow], -scroll_w, 'left');
        isNow++;
        if (isNow >= allboxs.length) {
            isNow = 0;
        }
        allboxs[isNow].style.left = scroll_w + "px";
        widthAnimtion(allboxs[isNow], 0, 'left');
        setindex();
        console.log(1);
    }
    slider.onmouseover=function () {
        clearInterval(time);
    }
    slider.onmouseout=function () {
        time=setInterval(nextAnimtion,5000);
    }

    function setindex() {
        for (var i = 0; i < slider_index.children.length; i++) {
            slider_index.children[i].className = "slider_index_icon";
        }
        slider_index.children[isNow].className = "slider_index_icon current";
    }
}